<template>
	<view>
		<uv-tabs :list="list" @click="click" lineColor="#111115" :scrollable="false"></uv-tabs>
		<block v-if="couponLists.length">
			<block v-for="(item,i) in couponLists" :key="i">
				<yhqItem :item="item" type="myYhq" :typeName="typeName" @getCouponLists="getCouponLists"></yhqItem>
			</block>
		</block>

		<block v-else>
			<noneList></noneList>
		</block>

		<uv-load-more :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexNum: 1,
				couponLists: [],
				typeName: "未使用",
				list: [{
						name: '未使用',
					},
					{
						name: '已使用',
					},
					{
						name: '已过期',
					}
				],
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum: 1
			};
		},
		onShow() {
			this.couponLists = []
			this.loadShow = true,
			this.loadStatus = 'loadmore',
			this.pageNum = 1
			this.getCouponLists()
		},
		onReachBottom() {
			// 触底加载
			this.getCouponLists()
		},
		methods: {
			getCouponLists() {
				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					this.$api.sendRequest({
						url: '/api/coupon/userCouponList',
						data: {
							page: this.pageNum,
							state: this.indexNum
						},
						success: res => {
							this.couponLists.push(...res.data)
							if (res.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							this.$forceUpdate()
						}
					})
				}
			},

			click(e) {
				this.couponLists = []
				this.loadShow = true,
				this.loadStatus = 'loadmore',
				this.pageNum = 1
				
				this.typeName = e.name
				this.indexNum = e.index + 1
				this.getCouponLists()
			}
		}
	}
</script>

<style lang="scss">

</style>
